<template>
  <view class="marquee-container">
    <view class="marquee-content">
      <!-- Top row images -->
      <view v-for="(image, index) in topImages" :key="index" class="marquee-item">
        <image class="img" style="width: 74rpx; height: 72rpx !important" :src="image.src" mode="widthFix" />
      </view>
    </view>
    <!-- Gap between rows -->
    <view class="gap"></view>

    <!-- Bottom row images -->
    <view class="marquee-content">
      <!-- Top row images -->
      <view v-for="(image, index) in bottomImages" :key="index" class="marquee-itema">
        <image style="width: 74rpx; height: 72rpx" :src="image.src" mode="widthFix" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue';

const topImages = ref([]);
const bottomImages = ref([]);
topImages.value = [
  { id: 1, src: '/static/index/Rectangle4(1).png' },
  { id: 2, src: '/static/index/Rectangle5(1).png' },
  { id: 3, src: '/static/index/Rectangle6(1).png' },
  { id: 6, src: '/static/index/Rectangle7(1).png' },
  { id: 4, src: '/static/index/Rectangle8(1).png' },
  { id: 5, src: '/static/index/Rectangle9(1).png' },
  { id: 7, src: '/static/index/Rectangle12(1).png' },
  { id: 8, src: '/static/index/Rectangle10(1).png' },
  { id: 1, src: '/static/index/Rectangle4(1).png' },
  { id: 2, src: '/static/index/Rectangle5(1).png' },
  { id: 3, src: '/static/index/Rectangle6(1).png' },
  { id: 6, src: '/static/index/Rectangle7(1).png' },
  { id: 4, src: '/static/index/Rectangle8(1).png' },
  { id: 5, src: '/static/index/Rectangle9(1).png' },
  { id: 7, src: '/static/index/Rectangle12(1).png' },
  { id: 8, src: '/static/index/Rectangle10(1).png' },
  { id: 1, src: '/static/index/Rectangle4(1).png' },
  { id: 2, src: '/static/index/Rectangle5(1).png' },
];
bottomImages.value = [
  { id: 1, src: '/static/index/Rectangle4(3).png' },
  { id: 2, src: '/static/index/Rectangle5(3).png' },
  { id: 3, src: '/static/index/Rectangle6(3).png' },
  { id: 4, src: '/static/index/Rectangle7(3).png' },
  { id: 5, src: '/static/index/Rectangle8(3).png' },
  { id: 6, src: '/static/index/Rectangle9(3).png' },
  { id: 7, src: '/static/index/Rectangle12(3).png' },
  { id: 8, src: '/static/index/Rectangle10(3).png' },
  { id: 1, src: '/static/index/Rectangle4(3).png' },
  { id: 2, src: '/static/index/Rectangle5(3).png' },
  { id: 3, src: '/static/index/Rectangle6(3).png' },
  { id: 4, src: '/static/index/Rectangle7(3).png' },
  { id: 5, src: '/static/index/Rectangle8(3).png' },
  { id: 6, src: '/static/index/Rectangle9(3).png' },
  { id: 7, src: '/static/index/Rectangle12(3).png' },
  { id: 8, src: '/static/index/Rectangle10(3).png' },
  { id: 1, src: '/static/index/Rectangle4(3).png' },
  { id: 2, src: '/static/index/Rectangle5(3).png' },
];
// onMounted(() => {
//   // Initialize your image data
//   // You can replace these paths with your actual image paths
//   topImages.value = Array.from({ length: 10 }, (_, index) => ({
//     id: index + 1,
//     src: `/static/top-image-${index + 1}.png`,
//   }));

//   bottomImages.value = Array.from({ length: 10 }, (_, index) => ({
//     id: index + 1,
//     src: `/static/bottom-image-${index + 1}.png`,
//   }));
// });
</script>

<style scoped>
.marquee-container {
  width: 750rpx !important;
  height: 160rpx !important;
  background-color: transparent;
  /* background-color: skyblue; */
  overflow: hidden;
}

.marquee-container {
  width: 750rpx;

  overflow: hidden;
}

.marquee-content {
  display: flex;
  animation: marquee 10s linear infinite;
}

.gap {
  width: 100%;
  /* Adjust the gap width as needed */
  height: 10rpx;
}

.marquee-item {
  width: 150rpx;
  /* Adjust the width of each image as needed */
  margin-right: 10rpx;
  /* Adjust the margin between images as needed */
}

.marquee-itema {
  width: 150rpx;
  /* Adjust the width of each image as needed */
  margin-right: 10rpx;
  /* Adjust the margin between images as needed */
}

@keyframes marquee {
  0% {
    transform: translateX(-90%);
  }

  100% {
    transform: translateX(0);
  }
}
</style>
